<template>
  <!-- 物流应付 -->
  <VPage>
    <VTable ref="tableRef" v-bind="tableOptins">
      <template #form="{ form }">
        <XForm
          :fieldList="fieldList"
          :formOption="optionsDataAll"
          :formData="form"
        >
        </XForm>
      </template>
      <template #toolbar_btns>
        <VActionBar :actions="actions" />
      </template>
    </VTable>
    <!-- <ImportDialog v-model="importVisible" /> -->
    <ImportDialog ref="importDialogRef" @refresh="refresh" />
    <DerivedCenter ref="DerivedCenterRef"></DerivedCenter>
  </VPage>
</template>
<script setup lang="jsx">
import { financeManageAuthList } from "@/Auth/finance-manage.js";
import XForm from "@/components/XForm/index.vue";
import ImportDialog from "@/components/importDialog/index.vue";
// import ImportDialog from "./components/ImportDialog/index.vue";
import DerivedCenter from "@/components/DerivedCenter/index.vue";
import { config_name } from "@/config/export.js";
import { useEnumSelect } from "@/hooks";
import { getTableSelectRow } from "@/hooks/tool.js";
import { logisticsList } from "@/api/index.js";
import { getlogisticsCope } from "./api/index.js";
const { options: optionsData } = useEnumSelect({
  params: ["finance_settle_type", "finance_charge_status"],
});
const optionsData1 = ref({});
const getlogistics = () => {
  logisticsList({}).then((res) => {
    optionsData1.value.logistics = res?.data || [];
  });
};
getlogistics();
const optionsDataAll = computed(() =>
  Object.assign({}, optionsData.value, optionsData1.value)
);
const tableRef = ref();
const tableOptins = reactive({
  formConfig: {
    data: {
      logistics_id: "",
      settle_type: "",
      type: "",
      dateRange: { type: "delivery_time", value: [], range: false }, // 组合+日期范围
    },
  },
  tooltipConfig: {
    showAll: false,
  },
  isToggle: true,
  columns: [
    { fixed: "left", width: 50, type: "checkbox" },
    {
      fixed: "left",
      minWidth: 260,
      title: "物流商",
      field: "logistics_id_text",
    },
    {
      title: "贷款所属期",
      width: 110,
      slots: {
        default: ({ row }) => {
          return (
            <div>
              <div>{row?.delivery_time}</div>
            </div>
          );
        },
      },
    },
    {
      title: "类型",
      width: 90,
      field: "type_text",
    },
    { title: "部门", width: 200, field: "department_name" },
    { title: "结算类型", width: 90, field: "settle_type_text" },
    { title: "原币币种", width: 90, field: "original_currency" },
    {
      title: "汇率",
      width: 90,
      field: "exchange_rate",
      formatter: ["formatNumberData", 4],
    },
    { title: "期初余额", width: 120, field: "opening_balance" },
    { title: "累计付款金额", width: 120, field: "accrue_payment_amount" },
    {
      title: "当月汇总金额",
      width: 120,
      field: "summarized_amount",
    },
    {
      title: "期末余额",
      width: 120,
      field: "opening_balance",
    },
    {
      title: "当月对账金额",
      width: 120,
      field: "reconciliation_amount",
    },
    {
      title: "备注",
      minWidth: 200,
      field: "remark",
    },
  ],
  proxyConfig: {
    autoLoad: false, // 是否自动加载查询数据
    props: {
      result: "data",
      total: "total",
    },
    ajax: {
      query: ({ page, form }) => {
        return getlogisticsCope({ ...form, ...page }).then((res) => {
          return {
            data: res.data,
            total: res.total,
          };
        });
      },
    },
  },
});
//导出中心
const DerivedCenterRef = ref();
const handleExport = async () => {
  let condition = getTableSelectRow(tableRef.value);
  DerivedCenterRef.value.open({
    tag_name: config_name["finance_manage"]["logistics_cope"],
    condition,
  });
};

// const importVisible = ref(false);
const importDialogRef = ref();
const handleImport = () => {
  // importVisible.value = true;
    importDialogRef.value?.open({
    type: "finance.logisticsCope",
    urlType: "/finance/logistics-cope/import",
  });
};
const refresh = () => {
  tableRef?.value.$table.commitProxy("query");
};
const publicStyle = { style: { width: "240px" } };
const fieldList = [
  {
    field: "logistics_id",
    type: "select",
    originOption: "logistics",
    options: {
      placeholder: "物流商名称",
      labelKey: "logistics_name",
      valueKey: "id",
    },
    collapseTags: true,
    multiple: true,
    ...publicStyle,
    class: "select-wrapper-style",
  },
  {
    field: "settle_type",
    type: "select",
    originOption: "finance_settle_type",
    options: {
      placeholder: "结算类型",
    },
    style: { width: "100px" },
  },
  {
    field: "type",
    type: "select",
    options: {
      placeholder: "类型",
      data: [
        { label: "头程费", value: 1 },
        { label: "尾程费", value: 2 },
      ],
    },
    style: { width: "100px" },
  },
  {
    field: "dateRange",
    type: "dateTimeRange",
    style: { width: "360px" },
    select: [{ label: "贷款所属期", value: "delivery_time" }],
    selectStyle: { width: "120px" },
    itemProps: {
      startPlaceholder: "最早时间",
      endPlaceholder: "最晚时间",
    },
  },
];

const actions = [
  {
    label: "导入期初余额",
    type: "primary",
    dkicon: "icon-Download",
    fn: handleImport,
    permission: [financeManageAuthList.accounts_payable.import],
  },
  {
    label: "导出",
    right: true,
    dkicon: "icon-Upload",
    fn: handleExport,
    permission: [financeManageAuthList.accounts_payable.export],
  },
];
</script>

<style lang="scss" scoped></style>
